<template>
  <div class="app-container">
    <div class="top" style="margin-top: 28px;">
      <el-select v-model="server" clearable filterable @change="handleSearch">
        <el-option
          v-for="(item,index) in servers"
          :key="index"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-input
        v-model="kwInput"
        placeholder="输入 ip 或 名称 进行筛选"
        class="input-with-select"
        clearable
        @keyup.native.enter="handleSearch"
      >
        <el-button slot="append" icon="el-icon-search" :disabled="listLoading" @click="handleSearch">搜索</el-button>
      </el-input>

      <el-button type="primary" class="el-icon-plus add-btn" @click="handleAction('create', '添加配置')">添加配置
      </el-button>

    </div>
    <el-table
      v-loading.body="listLoading"
      :data="data"
      border
      fit
      highlight-current-row
      style="width: 100%"
      :default-sort="{prop: 'create_at', order: 'descending'}"
      @sort-change="handleSort"
    >
      <el-table-column align="center" label="代理IP" prop="proxy_ip" width="200" sortable />
      <el-table-column align="center" label="本地ip" prop="ip" width="200" sortable />
      <el-table-column align="center" label="路径" prop="path" />
      <el-table-column align="center" label="用户名" prop="username" width="200" sortable="custom" />
      <el-table-column align="center" label="密码" prop="password" width="200" sortable="custom" />
      <el-table-column align="center" label="备注" prop="note" sortable="custom" />
      <el-table-column align="center" label="状态" prop="status" width="200" sortable="custom" />
      <el-table-column align="center" label="操作" width="300" fixed="right">
        <template slot-scope="scope">
          <el-button
            v-show="!scope.row.edit"
            size="mini"
            icon="el-icon-delete"
            type="primary"
            plain
            @click="handleAction('edit', scope.row)"
          >修改
          </el-button>
          <el-button
            v-show="!scope.row.edit"
            size="mini"
            icon="el-icon-delete"
            type="danger"
            plain
            @click="handleAction('delete', scope.row)"
          >删除
          </el-button>
          <el-dropdown
            split-button
            type="success"
            size="mini"
            @click="handleChangeStatus(scope.row,'start')"
          >开机
            <el-dropdown-menu slot="dropdown" size="mini">
              <el-dropdown-item @click.native.stop="handleChangeStatus(scope.row,'suspend')">挂起</el-dropdown-item>
              <el-dropdown-item @click.native.stop="handleChangeStatus(scope.row,'stop')">关机</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination
      v-if="data.length"
      background
      class="mt-pagination"
      :current-page="page"
      :page-sizes="[10,20,50,100]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handlePageChange"
    />
    <el-dialog
      append-to-body
      :title="title"
      :width="width"
      :visible.sync="innerDialogVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="temp" label-position="left" label-width="80px">
        <el-form-item v-if="action !== 'delete'" label="服务器">
          <el-select v-model="temp.vmwareserver_id" clearable filterable @change="handleSearch">
            <el-option
              v-for="(item,index) in servers"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="action !== 'delete'" label="path">
          <el-input v-model="temp.path" placeholder="VOS开始的相对路径" />
        </el-form-item>
        <el-form-item v-if="action !== 'delete'" label="代理IP">
          <el-input v-model="temp.proxy_ip" />
        </el-form-item>
        <el-form-item v-if="action !== 'delete'" label="本地ip">
          <el-input v-model="temp.ip" />
        </el-form-item>
        <el-form-item v-if="action !== 'delete'" label="username">
          <el-input v-model="temp.username" />
        </el-form-item>
        <el-form-item v-if="action !== 'delete'" label="password">
          <el-input v-model="temp.password" />
        </el-form-item>
        <el-form-item v-if="action !== 'delete'" label="note">
          <el-input v-model="temp.note" />
        </el-form-item>
        <el-form-item v-if="action !== 'delete'" label="status">
          <el-select v-model="temp.status" clearable placeholder="选择状态" size="small">
            <el-option label="请求开机" value="start" />
            <el-option label="运行中" value="running" />
            <el-option label="请求关机" value="stop" />
            <el-option label="已关机" value="stoped" />
            <el-option label="请求挂起" value="suspend" />
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="innerDialogVisible = false">取 消</el-button>
        <el-button :type="action !== 'delete'?'primary':'danger'" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Post, Put, Delete, Get } from '@/api/orders/vmwareclient'
import { Get as GetVmwareServer } from '@/api/orders/vmwareserver'
const orderMapper = {
  'ascending': 0,
  'descending': 1,
  'null': ''
}
import qs from 'qs'

export default {
  name: 'Wmwareclient',
  data() {
    return {
      servers: [],
      server: '',
      kwInput: '',
      data: [],
      action: '',
      innerDialogVisible: false,
      title: '修改',
      width: '80%',
      temp: {
        vmwareserver_id: '',
        path: '',
        ip: '',
        proxy_ip: '',
        username: 'www.90lhd.com',
        password: '17702725377',
        status: '',
        note: ''
      },
      listLoading: false
    }
  },
  created() {
    this.GetVmwareServer()
    this.getList()
  },
  methods: {
    notify(message, duration) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success',
        duration: duration || 2000
      })
    },
    GetVmwareServer() {
      GetVmwareServer(null, null)
        .then(response => {
          this.servers = response.data.data
        }).catch(err => {
          console.table(err)
        })
    },
    getList() {
      this.listLoading = true
      Get(null, qs.stringify({
        kw: this.kwInput
      }))
        .then(response => {
          this.data = response.data.data
          this.listLoading = false
        }).catch(err => {
          console.table(err)
          this.listLoading = false
        })
    },
    handleAction(action, row) {
      this.action = action
      switch (action) {
        case 'create':
          this.width = '50%'
          this.title = '添加新虚拟机信息'
          this.temp = {
            vmwareserver_id: this.temp.vmwareserver_id,
            path: 'VOS/xxx.vmx',
            ip: '',
            proxy_ip: '',
            username: 'www.90lhd.com',
            password: '17702725377',
            status: 'running',
            note: ''
          }
          this.innerDialogVisible = true
          break
        case 'delete':
          this.width = '30%'
          this.title = `确认要删除${row.ip}?`
          this.temp = Object.assign({}, row)
          this.innerDialogVisible = true
          break
        case 'edit':
          this.width = '50%'
          this.title = `修改${row.ip}`
          this.temp = Object.assign({}, row)
          this.innerDialogVisible = true
          break
      }
    },
    confirm() {
      const _data = this.temp
      switch (this.action) {
        case 'create':
          Post(_data
          ).then(response => {
            this.innerDialogVisible = false
            this.getList()
            this.notify('添加成功')
          })
          break
        case
          'delete':
          Delete(_data.id).then((response) => {
            this.innerDialogVisible = false
            this.getList()
            this.notify('删除成功')
          })
          break
        case
          'edit':
          Put(_data.id, _data).then((response) => {
            this.innerDialogVisible = false
            this.getList()
            this.notify('更新成功')
          })
          break
      }
    },
    handleChangeStatus(row, command) {
      this.listLoading = true
      row.status = command
      Put(row.id, row).then(response => {
        this.listLoading = false
        this.notify('修改成功')
      })
    },
    // pageSize 改变后触发 table 更新
    handleSizeChange(val) {
      this.pagesize = val
      this.getList()
    },
    // page 改变后触发 table 更新
    handlePageChange(val) {
      this.page = val
      this.getList()
    },
    handleSort(v) {
      this.order_by = v.prop
      this.order_desc = orderMapper[v.order]
      this.getList()
    },
    // 点击搜索
    handleSearch() {
      this.page = 1
      this.getList()
    }
  }
}
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}

.top >>> .el-input {
  width: 480px;
}

.top >>> .input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.app-container >>> .el-transfer-panel {
  width: 350px !important;
}

.top {
  padding-left: 20px;
  margin-bottom: 5px;
  margin-top: 28px;
}

.add-btn {
  float: right;
  margin-right: 20px;
  width: 150px
}

.mt-pagination {
  float: right;
  margin-top: 5px;
}

.app-container >>> .el-dialog {
  margin-top: 48px !important;
  margin-bottom: 5px;
}

.mt-form >>> .el-select {
  width: 100%;
}

.mt-form >>> .el-input__inner {
  width: 100%;
}

.mt-dialog >>> .el-dialog {
  margin: 10px auto !important;
}

.mt-dialog >>> .el-dialog__body {
  padding-bottom: 60px;
  padding-top: 5px;
}

</style>
